<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>直播数据分析</title>
		 <script src="https://unpkg.com/vue@next"></script>
<!--		 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!--		<script src="js/v3.2.8/vue.global.prod.js" type="text/javascript" charset="utf-8"></script>-->
	</head>
	<body>
<!--	    <h2>test</h2>-->
		<div id="app">
			<h2>实时数据展示</h2>
			<div class="tongji">
				<h4>系统启动时间  ------ {{ zhibo['ut'] }} </h4>
				<h4>当前登录用户  ------ {{ zhibo['ucount'] }} </h4>
				<h4>当前连接数    ------ {{ zhibo['count'] }} </h4>
				<h4>CPU负载      ------ {{ zhibo['cpuuseing'] }} </h4>
				<h4>系统总内存    ------ {{ zhibo['totalmem'] }} </h4>
				<h4>可用内存     ------ {{ zhibo['avablemem'] }} </h4>
				<h4>入口流量峰值  ------ {{ zhibo['inpeak'] }} </h4>
				<h4>出口流量峰值  ------ {{ zhibo['outpeak'] }} </h4>
				<h4>总流量峰值    ------ {{ zhibo['totalpeak'] }} </h4>
			</div>
			<!-- <br> -->
			<div>
				<h2><button type="button" onclick="stopRefer()">停止刷新</button></h2>
			</div>

		</div>


		<script>
 			const { createApp, ref } = Vue
			const App = {
				data() {
					return {
						counter: 0,
						timer: null,
						zhibo: {},
						updateTime: 3000
					}
				},

				mounted() {
					// 每隔5分钟定时刷新
					this.timer = setInterval(() => {
						console.log('请求数据中...');
						this.requestData();
					}, this.updateTime)	
				},
				beforeDestroy() {
					clearInterval(this.timer);
				},
				methods: {
					requestData() {
						axios.get('http://43.139.118.204:10001/api/getdata').then(response => {
							this.nearbyList = response.data;
							let data = response.data;
							console.log(data['code'], data['datas']['datas'])
							this.zhibo = data['datas']['datas']
						}).catch(err => {
							console.log(err);
						});
					},
					stopRefer(){
						// alert('stop');
						clearInterval(this.timer);
						this.timer=null;
						console.log('已停止刷新');
						
					}
				},

			};
			Vue.createApp(App).mount('#app');
		</script>

		<style>
			h2{ text-align: center;}
			body {
				background-color: black;
				background-color:rgba(0,0,0,0.8);
				font-style: normal;
				color: green;
				
			}

			.tongji {
				width: 60%;
				background-color: darkgray;
				/* background-color: rgb(0.2,0.5,0.6); */
				background-color:rgba(0,0,0,0.2);
				align-items: center;
				/* text-align:center; */
				padding: 5px;
				margin: 0 auto;
				
			}
		</style>

	</body>
</html>